<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>教育缴费</title>
    <link rel="stylesheet" href="./static/css/web.css"/>
    <link rel="stylesheet" href="./static/css/payment.css">
    <link rel="stylesheet" href="./static/bootstrap/css/bootstrap.css">
    <style type="text/css">
        .info-table {
            width: 100%;
            border: solid 1px #e5e5e5;
        }

        .info-table th, .info-table td {
            padding: 15px;
            vertical-align: middle;
            border-bottom: solid 1px #e5e5e5;
            border-right: solid 1px #e5e5e5;
        }

        .info-table th {
            width: 120px;
            background: #f9f9f9;
            text-align: right;
            color: #777;
        }

        .h3_title {
            font-size: 16px;
            margin-bottom: 10px;
            color: #555;
        }
    </style>
</head>
<body style="background: #e7e8eb;">
<div id="app" v-cloak>
    <div class="mainHeaderBox">
        <div class="mainHeaderBoxContent">
            <div class="mainHeaderBoxContentLog" @click="toPage('../main.html')">
                <!--<img src="../img/logo.png">
                <span>仁众智慧餐饮云平台</span>-->
                <img src="https://www.yqsh.cn/img/logo.png" id="show_logo">
                <span id="show_name">微信体验学校</span>
            </div>
            <div class="mainHeaderBoxContentMenus">
                <!--
                    作者：303740339@qq.com
                    时间：2019-02-13
                    描述：<div class="mainHeaderBoxContentMenu mainHeaderBoxContentMenuActive">
                -->
                <a class="mainHeaderBoxContentMenu" href="../contacts.html">
                    通讯录
                </a>
                <a class="mainHeaderBoxContentMenu mainHeaderBoxContentMenuActive" href="../workbench.html">
                    工作台
                </a>
                <a class="mainHeaderBoxContentMenu" href="../incrementService.html">
                    增值服务
                </a>
                <a class="mainHeaderBoxContentMenu" href="../html/dataCenter/index.html">
                    消费数据
                </a>
                <a class="mainHeaderBoxContentMenu" href="../consum.html">
                    数据总览
                </a>
                <a class="mainHeaderBoxContentMenu" href="../setting.html">
                    设置
                </a>
            </div>
            <div class="exit" onclick="logout()">
                退出
            </div>
        </div>
    </div>
    <div class="mainContentBox w1200 auto-height">
        <div class="contact-home-box">
            <div class="left-panel">
                <ul class="main-menu-nav" style="margin: 20px 0;">
                    <li class="menu-two" :class="{'hover':item.url && window.location.href.indexOf(item.url)>=0}"
                        v-for="item in menus">
                        <a :href="item.url"><span>{{item.title}}</span></a>
                    </li>
                </ul>
            </div>
            <div class="right-panel">
                <div style="margin: 20px 20px 40px 20px;min-height:550px;">
                    <div class="header-title dline">
                        <h3 class="h3_title">缴费明细查询</h3>
                        <p>可查询到用户缴费记录</p>
                    </div>
                    <div>
                        <div class="row">
                            <div class="col">
                                <div class="input-group">
                                    <input type="text" class="form-control" v-model="params.searchKey"
                                           placeholder="请输入缴费项目的名称或者缴费人姓名、学号、身份证号码">
                                    <div class="input-group-append">
                                        <button class="btn btn-outline-secondary" @click="loadData(1)" type="button">查询</button>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <!--<div class="form-group form-check" style="margin-bottom: 0;margin-top: 4px;">
                                    <input type="checkbox" class="form-check-input" id="yjf" @click="changeStatus">
                                    <label class="form-check-label" style="vertical-align: middle;"
                                           for="yjf">&nbsp;已缴费</label>
                                </div>-->
                                <div class="form-group">
                                    <select v-model="params.payStatus" class="form-control" style="width:120px;" >
                                        <option value="" disabled selected>请选择支付状态</option>
                                        <option v-for="item in payStatusList" :value="item.value">{{item.text}}</option>
                                    </select>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div style="margin:20px 0;">
                        <table class="m-table hf8">
                            <thead>
                            <tr>
                                <th>项目</th>
                                <th style="width: 100px;">姓名</th>
                                <th style="width: 150px;">身份证号</th>
                                <th style="width: 100px;">学号</th>
                                <th style="width: 75px;">缴费金额</th>
                                <th style="width: 85px;">已完成缴费</th>
                                <th style="width: 250px;">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="item in pageData.list">
                                <td>
                                    <div>{{item.itemName}}</div>
                                </td>
                                <td>
                                    <div>{{item.studentName}}</div>
                                </td>
                                <td>
                                    <div>{{item.studentIdcard}}</div>
                                </td>
                                <td>
                                    <div>{{item.studentNumber}}</div>
                                </td>
                                <td>
                                    <div>{{item.itemAmount}}</div>
                                </td>
                                <td>
                                    <div>{{item.payStatus?'是':'否'}}</div>
                                </td>
                                <td>
                                    <div>
                                        <a href="javascript:void(0)" @click="reviseAmount(item.id,item.itemName)">修改金额</a>
                                        &nbsp;
                                        <a href="javascript:void(0)" @click="reviseStatus(item.id,item.itemName)">修改状态</a>
                                        &nbsp;
                                        <a href="payment-return.html">退费</a>
                                        &nbsp;
                                        <a href="javascript:void(0)" @click="deleteItem(item.id)">删除</a>
                                    </div>
                                </td>
                            </tr>
                            <tr v-if="pageData.list && pageData.list.length == 0">
                                <td colspan="7" class="empty-tip">
                                    没有相关项目
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div style="float: right;" v-if="pageData.list && pageData.list.length > 0">
                        <nav aria-label="...">
                            <ul class="pagination">
                                <li class="page-item" :class="{'disabled':pageData.hasPreviousPage==false}">
                                    <a class="page-link" href="javascript:void(0)">上一页</a>
                                </li>
                                <li class="page-item" :class="{'active':item==pageData.pageNum}"
                                    v-for="item in pageData.navigatepageNums">
                                    <a class="page-link" href="javascript:void(0)"
                                       @click="loadData(item)">{{item}}</a>
                                </li>
                                <li class="page-item" :class="{'disabled':pageData.hasNextPage==false}">
                                    <a class="page-link" href="javascript:void(0)">下一页</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="footerBox">
        <div class="footerBoxContent">
            Copyright Notice：@2020 YQSH. All Rights Reserved | ICP：蜀ICP备19024447号-1
        </div>
    </div>
</div>
</body>

</html>
<script type="text/javascript" src="./static/js/vue.min.js"></script>
<script type="text/javascript" src="./static/js/vue-resource.min.js"></script>
<script type="text/javascript" src="./static/js/utils.js"></script>
<script type="text/javascript" src="./static/js/jquery.js"></script>
<script type="text/javascript" src="./static/js/layer/layer.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {pageData: {}, params:{},payStatusList: []},
        methods: {
            deleteItem: function (id) {
                let _this = this;

                layer.confirm('确定要删除该条记录吗？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    postWithData("/paydetail/delete", [id], function (result) {
                        layer.msg('删除成功.', {icon: 1});
                        _this.loadData();
                    })
                });


            },
            loadData: function (page) {
                let _this = this;

                post("/paydetail/list/" + (page || 1) + "/20", _this.params, function (result) {
                    _this.pageData = result.data;
                })
            },
            reviseAmount: function (id,itemName) {
                layer.open({
                    type: 2,
                    area: ['400px', '450px'],
                    fixed: false, //不固定
                    content: './payment-revise-amount.html?id='+id+'&itemName='+itemName,
                    title:'修改金额'
                });
            },
            reviseStatus: function (id,itemName) {
                layer.open({
                    type: 2,
                    area: ['400px', '450px'],
                    fixed: false, //不固定
                    content: './payment-revise-status.html?id='+id+'&itemName='+itemName,
                    title:'修改支付状态'
                });
            },
            getPayStatusList: function () {
                let _this = this;
                post("/common/payStatusList", function (result) {
                    var payStatus = result.data;
                    $.each(payStatus, function (_key) {
                        _this.payStatusList.push({value: _key, text: payStatus[_key]})
                    })
                });

            }

        },
        mounted: function () {
            this.loadData();
            this.getPayStatusList()
        }
    });
</script>